<!--  -->
<template>
  <div :class="source === 1 ? 'myMessage' : 'yourMessage'">
    <span class="userName" v-if="source === 2">
      {{ userName }}：
    </span>
    <span class="message">{{ message }}</span>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  props: {
    source: {
      type: Number,
    },
    userName: {
      type: String,
    },
    message: {
      type: String,
    },
  },
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.myMessage {
  max-width: 200px;
  padding: 10px;
  background: #3686ff;
  color: #fff;
  font-size: 14px;
}
.yourMessage {
  max-width: 200px;
  margin: 10px 0;
  padding: 10px;
  background: #3686ff;
  color: #fff;
  font-size: 14px;
  .userName {
    font-size: 15px;
  }
}
</style>